// Delay the app initialization
const initializeApp = () => {
    function App() {
        const { 
            scores, 
            isLeaderboardLoading, 
            initialLoadComplete, 
            loadScores, 
            handleScoreUpdate 
        } = useScores();

        const {
            gameStarted,
            playerName,
            currentLevel,
            handleGameStart,
            handleBackToHome,
            handleLevelChange
        } = useGameState();

        const { achievement, setAchievement } = useAchievement();
        const [showFindSeries, setShowFindSeries] = React.useState(false);

        return (
            <div className="min-h-screen bg-gray-100 dark:bg-gray-900 relative" data-name="app">
                {!gameStarted && <BackgroundGrid />}
                <Leaderboard 
                    scores={scores} 
                    playerName={playerName}
                    gameStarted={gameStarted}
                    currentLevel={currentLevel}
                    isLoading={isLeaderboardLoading}
                    initialLoadComplete={initialLoadComplete}
                />
                
                {gameStarted ? (
                    <GameBoard 
                        playerName={playerName} 
                        onScoreUpdate={(level) => handleScoreUpdate(playerName, level, scores)} 
                        onLevelChange={handleLevelChange}
                        scores={scores}
                        onHome={() => handleBackToHome(loadScores)}
                    />
                ) : (
                    <div className="container mx-auto px-4 py-8 relative z-10">
                        <StartScreen 
                            onStart={handleGameStart} 
                            savedPlayerName={localStorage.getItem('colorGamePlayerName') || ''}
                            onOpenFindSeries={() => setShowFindSeries(true)}
                        />
                    </div>
                )}

                {achievement && (
                    <AchievementPopup 
                        achievement={achievement} 
                        onClose={() => setAchievement(null)}
                    />
                )}

                <FindSeriesMenu 
                    isOpen={showFindSeries}
                    onClose={() => setShowFindSeries(false)}
                />
            </div>
        );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
};

// Wait for 600ms before initializing the app
setTimeout(initializeApp, 600);
